<template>
    <div>
        <top />
        <div class="main_myAccount">    
            <h1 class="h_title">Account Information</h1>
            <el-card class="card_account">
                <el-form model="userInfo" label-width="120px" >
                    <el-form-item label="username:">
                        <div class="div_formItem">{{ userInfo.userid }}</div>
                    </el-form-item>
                    <el-form-item label="email:">
                        <div class="div_formItem">{{ userInfo.email }}</div>
                    </el-form-item>
                    <el-form-item label="firstname:">
                        <div class="div_formItem">{{ userInfo.firstname }}</div>
                    </el-form-item>
                    <el-form-item label="lastname:">
                        <div class="div_formItem">{{ userInfo.lastname }}</div>
                    </el-form-item>
                    <el-form-item label="status:">
                        <div class="div_formItem">{{ userInfo.status }}</div>
                    </el-form-item>
                    <el-form-item label="addr1:">
                        <div class="div_formItem">{{ userInfo.addr1 }}</div>
                    </el-form-item>
                    <el-form-item label="addr2:">
                        <div class="div_formItem">{{ userInfo.addr2 }}</div>
                    </el-form-item>
                    <el-form-item label="city:">
                        <div class="div_formItem">{{ userInfo.city }}</div>
                    </el-form-item>
                    <el-form-item label="state:">
                        <div class="div_formItem">{{ userInfo.state }}</div>
                    </el-form-item>
                    <el-form-item label="zip:">
                        <div class="div_formItem">{{ userInfo.zip }}</div>
                    </el-form-item>
                    <el-form-item label="country:">
                        <div class="div_formItem">{{ userInfo.country }}</div>
                    </el-form-item>
                    <el-form-item label="phone:">
                        <div class="div_formItem">{{ userInfo.phone }}</div>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-button @click="()=>{this.$router.push({name:'Home'})}" class="btn_return" type="primary">返回</el-button>
        </div>
        <bottom />
    </div>
</template>

<script>
import top from '../../components/Top.vue'
import bottom from '../../components/Bottom.vue'
export default {
  components: {top , bottom },
    name:   'MyAccount',
    data(){
        return{
            userInfo:{},
            account:'',

        }
    }
}
</script>

<style scoped> 
.main_myAccount{
    text-align: center;
}
.h_title{
    margin-top: 80px;
}
.table_account{
    margin-top: 50px;
    width: 60%;
    margin-left: 20%;
}
.card_account{
    text-align: center;
    width: 40%;
    margin-left: 30%;
    padding: 30px;
}
.div_formItem{
    text-align: left;
    margin-left: 30px;
    font-size: 20px;
}
.btn_return{
    margin-top: 30px;
    margin-bottom: 80px;
    font-size: 25px;
}
</style>
<style>
.el-form-item__label{
    font-size: 20px;
}
</style>